<template>
  <div class="box">
    <router-link to="/Eight" exact-active-class="active">
      <p style="font-size: 24px; margin-left: 10px">&lt;</p>
    </router-link>
    <h2>活动说</h2>
    <p class="p1">以下消息仅供参考,最终以活动页面为准</p>
    <div class="jin">
      <img src="54.jpg" alt="" class="pictitle" />
      <p class="title">金铲铲之战<span class="red">最近在玩</span></p>
      <ul class="content-box">
        <li v-for="good in goods" :key="good.id">
          <router-link
            v-bind:to="{ params: { goodid: good.id } }"
          >
            <img :src="good.img" class="pic" />
          </router-link>
          <div class="wen">
            <p class="name"><span></span>{{ good.name }}</p>
            <p class="zan"><span class="iconfont icon-youhuiquan"></span>{{ good.zan }}</p>
            <p class="liulan"><span class="iconfont icon-youhuiquan"></span>{{ good.liulan }}</p>
            <p class="times"><span class="iconfont icon-youhuiquan"></span>{{ good.times }}</p>
          </div>
        </li>
        <p class="action">更多的活动等你参与</p>
      </ul>
    </div>
    <div class="lianmeng">
      <img src="57.jpg" alt="" class="pictitle" />
      <p class="title" v-on:click="fun()">英雄联盟手游<span class="red">最近在玩</span></p>
      <ul class="content-box">
        <li v-for="good in lianmeng" :key="good.id">
          <router-link
            v-bind:to="{ params: { goodid: good.id } }"
          >
            <img :src="good.img" class="pic" />
          </router-link>
          <div class="wen">
            <p class="name"><span></span>{{ good.name }}</p>
            <p class="zan"><span class="iconfont icon-youhuiquan"></span>{{ good.zan }}</p>
            <p class="liulan"><span class="iconfont icon-youhuiquan"></span>{{ good.liulan }}</p>
            <p class="times"><span class="iconfont icon-youhuiquan"></span>{{ good.times }}</p>
          </div>
        </li>
        <p class="action">更多的活动等你参与</p>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: String,
  },
  data() {
    return {
      goods: [
        {
          id: "001",
          name: "霓虹之夜 赛季开启",
          zan: "69",
          liulan: "20",
          img: "55.jpg",
          times: "02.24-11:05",
        },
        {
          id: "002",
          name: "金铲铲周报",
          zan: "175",
          liulan: "28",
          img: "56.jpg",
          times: "10.11-03.22",
        },
      ],
      lianmeng: [
        {
          id: "003",
          name: "超值折扣限时上架",
          zan: "15",
          liulan: "3",
          img: "58.jpg",
          times: "02.24-03:05",
        },
        {
          id: "004",
          name: "限时10元购精品皮肤",
          zan: "30",
          liulan: "5",
          img: "59.jpg",
          times: "10.11-03.06",
        },
      ],
    };
  },
  methods:{
      fun(){
        this.$router.push("./QQ")
      }
  }
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
h2 {
  font-size: 22px;
  position: absolute;
  top: 4px;
  left: 145px;
}
.p1 {
  margin-top: 20px;
  text-align: center;
  background-color: rgb(255, 247, 234);
  height: 40px;
  line-height: 40px;
  color: rgb(126, 110, 79);
}
.pictitle {
  width: 50px;
  margin-top: 25px;
}
.red {
  background-color: red;
  color: white;
  font-size: 14px;
  margin-left: 10px;
}
.jin {
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid rgb(242, 242, 242);
  padding-left: 20px;
  background-color: rgb(253, 253, 253);
  position: relative;
}
.lianmeng {
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid rgb(242, 242, 242);
  padding-left: 20px;
  background-color: rgb(253, 253, 253);
  position: relative;
}
.title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 10px;
  position: absolute;
  top: .13rem;
  left: 80px;
}
.content-box {
  box-sizing: border-box;
  position: relative;
  margin-top: 20px;
}
.content-box > li {
  margin-bottom: 25px;
  margin-top: 20px;
}
.pic {
  width: 140px;
  height: 80px;
}
.wen {
  position: absolute;
  left: 160px;
  margin-right: 0px;
  width: 200px;
  /* top: 1px; */
}
.name {
  position: absolute;
  top: -70px;
  display: block;
  width: 180px;
  margin-right: 0px;
  font-weight: 600;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.zan {
  color: rgb(128, 128, 128);
  font-size: 14px;
  position: absolute;
  top: -34px;
}
.liulan {
  color: rgb(128, 128, 128);
  font-size: 14px;
  position: absolute;
  top: -34px;
  left: 50px;
}
.times {
  color: rgb(141, 141, 141);
  font-size: 12px;
  position: absolute;
  top: -33px;
  left: 100px;
}
.action {
  width: 350px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  border-radius: 20px;
  line-height: 40px;
  background-color: rgb(242, 242, 242);
  color: rgb(107, 107, 107);
}
</style>